<template>
  <FormItemWrapper :component="component">
    <Slider v-model="formData[component.compConfigData.fieldConfig.bindingFieldName]"
            :min="component.compConfigData.widgetConfig.min"
            :max="component.compConfigData.widgetConfig.max"
            :step="component.compConfigData.widgetConfig.step"
            :disabled="component.compConfigData.widgetConfig.disabled"
            :range="component.compConfigData.widgetConfig.range"
            :show-input="component.compConfigData.widgetConfig.showInput"
            :show-stops="component.compConfigData.widgetConfig.showStops"
            :show-tip="component.compConfigData.widgetConfig.showTip"
            :input-size="component.compConfigData.widgetConfig.inputSize"
            @on-change="onChangeHandler"
            @on-input="onInputHandler"
    ></Slider>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemSliderWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, '滑块'),
      widgetConfig: {
        min: 0,
        max: 100,
        step: 1,
        disabled: false,
        range: false,
        showInput: false,
        showStops: false,
        showTip: 'hover',
        inputSize: 'default',
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onChange: {remark: '在松开滑动时触发，返回当前的选值', resultValues: ['value'], code: ''},
        onInput: {remark: '滑动条数据变化时触发，返回当前的选值', resultValues: ['value'], code: ''},
      })

    })
  },
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    onChangeHandler(value) {
      this.runWidgetEventCode('onChange', (fn)=>{
        fn.call(this, value)
      })
    },
    onInputHandler(value) {
      this.runWidgetEventCode('onInput', (fn)=>{
        fn.call(this, value)
      })
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
